$(function () {
    $("#jqGrid").jqGrid({
        url: baseURL + 'sys/discoverImg/list',
        datatype: "json",
        colModel: [
            {label: 'id', name: 'bannerId', index: "activeId", width: 45, key: true, sortable: false, align: 'center'},
            {label: '标题', name: 'title', width: 75, sortable: false, align: 'center'},
            {
                label: '图片预览',
                name: 'imgUrl',
                width: 60,
                sortable: false,
                align: 'center',
                formatter: function (value) {
                    return value == null ? '-' : '<a  onclick = "openImg(\'' + value + '\')"> 查看图片 </a>';
                }
            },
            {
                label: '跳转地址', name: 'jumpUrl', width: 45, sortable: false, formatter: function (value, options, row) {
                    return value == null ? "-" : value;
                }, align: 'center'
            },
            {
                label: '类型', name: 'type', width: 60, sortable: false, align: 'center', formatter: function (value) {
                    return value == 2 ? "置顶轮播" : "精选案例"
                }
            },
            {label: '创建时间', name: 'createDate', width: 60, sortable: false, align: 'center'},
            {label: '顺序', name: 'sort', width: 75, sortable: false, align: 'center'},
            {
                label: '状态', name: 'state', width: 75, sortable: false, formatter: function (value, options, row) {
                    return value == 1 ? "显示" : "隐藏";
                }, align: 'center'
            },
            {
                label: '跳转方式',
                name: 'jumpType',
                width: 75,
                sortable: false,
                align: 'center',
                formatter: function (value, options, row) {
                    return value == 1 ? "链接直跳" : value == 2 ? "获取内容" : "不跳转";
                }
            }

        ],
        viewrecords: true,
        height: "auto",
        rowNum: 10,
        rowList: [10, 30, 50],
        rownumbers: true,
        rownumWidth: 25,
        autowidth: true,
        multiselect: true,
        multiboxonly: true,
        pager: "#jqGridPager",
        jsonReader: {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames: {
            page: "page",
            rows: "limit",
            order: "order"
        },

        gridComplete: function () {

            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
            $('#jqGrid').closest("div.ui-jqgrid-view")
                .children("div.ui-jqgrid-titlebar")
                .css("text-align", "center")
                .children("span.ui-jqgrid-title")
                .css("float", "none");
        }
    });

    vm.initTypes();

});

var ue=UE.getEditor('editor');

var vm = new Vue({
    el: '#rrapp',
    data: {
        q: {
            state: 0,
            type: 0
        },
        showList: true,
        showUpdate: false,
        title: null,
        states: [
            {
                value: 0,
                msg: '显示/隐藏'
            },
            {
                value: 1,
                msg: '显示'
            },
            {
                value: 2,
                msg: '隐藏'
            }
        ],
        types: [],
        disImg: {
            bannerId: null,
            title: null,
            imgUrl: null,
            jumpUrl: null,
            sort: null,
            type: 0,
            state: 0,
            jumpType: 0

        },
        jumpTypes: [
            {
                value: 0,
                msg: '跳转方式'
            },
            {
                value: 1,
                msg: '链接直跳'
            },
            {
                value: 2,
                msg: '获取内容'
            }
        ],
    },
    methods: {
        query: function () {
            vm.reload();
        }, clean: function () {
            vm.q = {
                state: 0,
                type: 0
            };
            $("#jqGrid").jqGrid('setGridParam', {page: 1});
            vm.reload();
        }, reload: function () {
            vm.showList = true;
            vm.showUpdate = false;
            var page = $("#jqGrid").jqGrid('getGridParam', 'page');
            $("#jqGrid").jqGrid('setGridParam', {
                postData: {'state': vm.q.state, 'type': vm.q.type},
                page: page
            }).trigger("reloadGrid");

        }, add: function () {
            vm.disImg = {
                imgId: null,
                title: null,
                imgUrl: null,
                jumpUrl: null,
                sort: null,
                type: 0,
                state: 0,
                jumpType: 0
            }
            vm.showList = false;
            vm.showUpdate = true;
            vm.title = "新增";

        }, update: function () {
            let rowid = getSelectedRow();
            if (rowid == null) {
                return;
            }
            let row = $("#jqGrid").jqGrid('getRowData', rowid);
            if (row == null) {
                return;
            }
            vm.showList = false;
            vm.showUpdate = true;
            vm.title = "修改";
            $.get(baseURL + "sys/discoverImg/getById/" + row.bannerId, r => {
                vm.disImg = r.img;
            })
        }, modify: function () {
            let imgEls = $("#img").val();
            if (imgEls == null || imgEls == '') {
                vm.commitData();
            } else {
                let formData = new FormData($("form")[0]);
                formData.append("file", $("#img")[0]);
                $.ajax({
                    url: baseURL + "sys/discoverImg/uploadImg",
                    datatype: 'json',
                    type: 'post',
                    data: formData,
                    cache: false,
                    traditional: true,
                    contentType: false,
                    processData: false,
                    success: function (r) {
                        if (r.code == 0) {
                            vm.disImg.imgUrl = r.url;
                            vm.commitData();
                        } else {
                            layer.msg("图片上传失败")
                        }
                    }
                })
            }
        }, commitData: function () {
            let url = "";
            if (vm.disImg.bannerId == null || vm.disImg.bannerId.length == 0) {
                url = baseURL + "sys/discoverImg/addDiscoverImg";
            } else {
                url = baseURL + "sys/discoverImg/updateImg";
            }
            if (url == null || url.length == 0) {
                return;
            }
            let content = ue.getContent();

            vm.disImg.content=content;
            $.ajax({
                url: url,
                data: JSON.stringify(vm.disImg),
                type: "post",
                contentType: "application/json",
                success: function (r) {
                    if (r.code == 0) {
                        layer.msg("成功");
                        vm.reload();
                    } else {
                        if (vm.disImg.id == null || vm.disImg.id.length == 0) {
                            layer.msg("新增失败")
                        } else {
                            layer.msg("修改失败")
                        }
                    }
                }
            })
        }, initTypes(){
            $.get(baseURL+"sys/discoverImg/getTypes/"+3,r=>{
                vm.$set(vm.types,0,{
                    type:"0",
                    name:"类型选择"
                })
                for (let i=0;i<r.types.length;i++){
                    vm.$set(vm.types,(i+1),r.types[i])

                }
            })
        }
    }
});

//打开图片
function openImg(src) {

    $("#goodsImg").attr("src", src);

    layer.open({
        type: 1,
        title: "请选择",
        content: $("#goodsImg"),
        btn: ['确定'],
        area: ['720px', '640px'],
        btn1: function (index) {
            layer.close(index);
        }

    })
}
